<template>
	<view class="redact">
		<view class="new_top">
			<view class="new_top_input">
				<view class="new_top_input_ipt">
					<text class="text">收件人</text>
					<input class="itp" v-model="form.realName" type="text" placeholder="请填写收件人姓名">
				</view>
				<view class="new_top_input_ipt">
					<text class="text">联系电话</text>
					<input class="itp" v-model="form.phone" type="text" placeholder="请填写您的联系电话">
				</view>

				<view class="new_top_input_ipt_c">
					<text class="text">收货地址</text>
					<view class="itp" type="text" @click="inputsite" >{{forms}}</view>
					<!-- <text class="text2">定位</text> -->
				</view>
				<view class="new_top_input_ipt_a">
					<text class="text">详细地址</text>
					<input class="itp" type="text" v-model="form.detail" placeholder="填写详细地址，例：6号楼203室">
				</view>
			</view>

			<view class="new_moren">
				<view class="new_moren_left">
					<text class="text1">设为默认地址</text>
					<text class="text2">提示：同城服务默认推荐使用该地址</text>
				</view>
				<switch class="switch" :checked="isDefault" color="#FFCC33" @change="switch1Change" />
			</view>
			<view class="new_bottom_tianjia" @click="addconfirm">
				确定
			</view>
		</view>

		<u-popup :show="show" position="bottom" custom-style="height: 40%;" @close="onClose">
			
			<view style="display: flex;justify-content: space-between;padding: 20rpx 50rpx;">
				<text @click="redactcancel">取消</text>
				<text @click="ascertain">确定</text>
			</view>
			<picker-view indicator-style="height:88rpx;" style="height:440rpx" :value="value" @change="bindChange"
				class="citybody">
				<picker-view-column style="line-height: 88rpx;font-size: 28rpx;text-align: center;">
					<view v-for="(item,index) in provinces" :key='index'>{{item}}</view>
				</picker-view-column>
				<picker-view-column style="line-height: 88rpx;font-size: 28rpx;text-align: center;">
					<view v-for="(item,index) in citys" :key='index'>{{item}}</view>
				</picker-view-column>
				<picker-view-column style="line-height: 88rpx;font-size: 28rpx;text-align: center;">
					<view v-for="(item,index) in areas" :key='index'>{{item}}</view>
				</picker-view-column>
			</picker-view>

		</u-popup>

	</view>
</template>

<script>
	import homeServices from '../../service/homeService'



	export default {
		onLoad() {
			// console.log(areaList)
		},
		data() {
			return {
				show: false,
				province: '',
				city: '',
				district: '',
				list: [],
				realNames:'',
				sphone:'',
				details:'',
				
				
				name:'',
				phones:'',
				site:'',
				detailedaddress:'',
				name1:'',
				name2:'',
				name3:'',
				name4:'',
				name5:'',
				name6:'',
				provinces: [], //省所有
				citys: [], //市所有
				areas: [], //区所有
				province: "", //当前省份
				city: "", //当前市
				area: "", //当前区
				value: [0, 0, 0],
				values: [0, 0, 0],
				lists:[],
				ids:'',
				id:'',
				form:{
					
				},
				forms:'',
				isDefault:''
				
			}
		},
		onLoad(id) {
			// console.log(id)
			this.id=id.id
			console.log(this.redactid)
			this.getredact()

		},
		methods: {
		async	getredact(){
				// let params={
				// 	id:this.id
				// }
				let res = await homeServices.getredact(this.id)
				this.form=res.data
				console.log(this.form)
				// this.realNames=this.form.realName
				// this.sphone=this.form.phone
				// this.details=this.form.detail
				this.name1=this.form.province
				this.name2=this.form.city
				this.name3=this.form.district
				this.forms=this.name1 + '/' + this.name2 + '/' + this.name3;
				this.isDefault = this.form.isDefault
				
			},
			bindChange(e) {
				// console.log(e)
				// const val = e.detail.value
				var val = e.detail.value //当前选中的下标
				// console.log(val)
				var t = this.values; //旧选中下标
				this.lists=[]
				this.list.forEach((it,i)=>{
					if(i==val[0]){
						this.lists.push(it.n)
						this.name1=it.n
						it.c.forEach((t,is)=>{
							if(is==val[1]){
								this.lists.push(t.n)
								this.name2=t.n
								t.c.forEach((tt,ii)=>{
									if(ii==val[2]){
										this.lists.push(tt.n)
										this.name3=tt.n
										this.ids=tt.pid
										// console.log(this.ids)
									}
								})
							}
							
						})
					}
					
					
				})
				// console.log(this.lists)
				if (val[0] != t[0]) { //如果选择的省份变了
					this.citys = [] //清空市区
					this.areas = []
					this.list[val[0]].c.forEach(item => { //获取新选择省份的所有市
						this.citys.push(item.n)
					})
					this.list[val[0]].c[0].c.forEach(item => { //获取新选择省份的第一个市的所有区
						this.areas.push(item.n)
					})
					this.province = this.provinces[val[0]], //省
						this.city = this.list[val[0]].c[0].n, //市
						this.area = this.list[val[0]].c[0].c[0].n, //区
						this.values = val,
						this.value = [val[0], 0, 0]
					return;
				}
				if (val[1] != t[1]) { //如果选择的市变了
					this.areas = []; //清空区
					this.list[val[0]].c[val[1]].c.forEach(item => {
						this.areas.push(item.n)
					})
					this.city = this.citys[val[1]] //市
					this.area = this.list[val[0]].c[val[1]].c[0].n //区
					this.values = val,
						this.value = [val[0], val[1], 0]
					return;
				}
				if (val[2] != t[2]) {
					this.area = this.areas[val[2]] //区
					this.values = val
					return;
				}
				
				
				
				
			},

			ascertain(){
				this.forms=this.name1 + '/' + this.name2 + '/' + this.name3;
				this.show=false
				// console.log(this.site)
			},
			redactcancel(){
				this.show=false
			},
		  async	 addconfirm() {
			  if (!(/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.form.phone))) {
			  	uni.showToast({
			  		title: '请输入正确的手机格式',
			  		icon: 'none'
			  	});
			  	return false;
			  }
			  if(this.form.detail==''){
				  uni.showToast({
				  	title: '请输入详细地址',
				  	icon: 'none'
				  });
				  return false;
			  }
				let params = {
					address:{
						province:this.name1,
						city:this.name2,
						district:this.name3,
						city_id:this.ids
					},
					id:this.id,
					detail:this.form.detail,
					is_default:this.isDefault,
					phone:this.form.phone,
					real_name:this.form.realName,
				}
				let res = await homeServices.addconfirm(params)
				console.log(res)
				// uni.redirectTo({
				// 	url:'/pagesB/shippingaddress/shippingaddress'
				// })
				uni.navigateBack()
				// console.log(res)
			},
			switch1Change(e){
				console.log(e)
				this.isDefault=e.detail.value
				
			},
			onClose() {
				this.show = false
			},
			
			confirms() {
				this.show = false
			},
			async inputsite() {
				this.show = true
				this.provinces = []
				this.citys = []
				this.areas = []
				let params = {}
				let res = await homeServices.inputsite(params)
				this.list = res.data
				this.list.forEach(item => {
					this.provinces.push(item.n) //第一列省份所有名称
					// console.log(this.provinces)
				})
				this.list[0].c.forEach(item => {
					this.citys.push(item.n) //第一个省的市所有名称
				})
				this.list[0].c[0].c.forEach(item => {
					this.areas.push(item.n) //第一个省份的第一个市的所有区
				})
				this.province = this.list[0].n //省
				this.city = this.list[0].c[0].n //市
				this.area = this.list[0].c[0].c[0].n //区
				console.log(this.list)
				this.forms=this.province + '' + this.city + '' + this.area;
			},


		},

	}
</script>

<style lang="scss" scoped>
	@import '@/static/sass/redact.scss';
</style>
